<template>
  <el-dialog v-model="dialogVisible" width="80%" >
    <el-form ref="formRef" class="mb" :model="queryParams" :inline="true" label-width="110px">
      <el-form-item label="产品编号" prop="productNumber">
        <el-input
          clearable
          @keyup.enter="handleQuery"
          v-model="queryParams.productNumber"
          placeholder="请输入产品编号"
        />
      </el-form-item>
      <el-form-item label="产品名称" prop="productName">
        <el-input
          clearable
          @keyup.enter="handleQuery"
          v-model="queryParams.productName"
          placeholder="请输入产品名称"
        />
      </el-form-item>
      <el-form-item label="部件名称" prop="supplierTpartNameypeName">
        <el-input
          clearable
          @keyup.enter="handleQuery"
          v-model="queryParams.partName"
          placeholder="请输入部件名称"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery" type="primary">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-scrollbar ref="scrollbarRef" height="400px" always @scroll="scroll">
    <el-table
      border
      v-loading="formLoading"
      ref="multipleTableRef"
       :height="350"
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" />
      <el-table-column label="图纸图号" align="left" prop="drawingNumber" />
      <el-table-column label="产品编号" align="left" prop="productNumber" />
      <el-table-column label="产品名称" align="left" prop="productName" />
      <el-table-column label="部件编号" align="left" prop="partNumber" />
      <el-table-column label="部件名称" align="left" prop="partName" />
      <!-- <template #default="scope">
        <byte-tag
          className="test"
          :type="'dict_supplier_status'"
          :value="scope.row.status"
        />
      </template>
      </el-table-column> -->
      <el-table-column label="报工人" align="left" prop="reportName"/>
      <el-table-column label="报工数量" align="left" prop="reportQuantity"/>
    </el-table>
  </el-scrollbar>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import * as MgmtDefectiveProductRegistrationApi from '@/api/quality/qualitycontrol/mgmtDefectiveProductRegistration'
// import ByteTag from './ByteTag.vue'
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const queryParams = reactive({
  productNumber: '',
  productName: '',
  partName: ''
})
const list = ref([])
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true
  list.value = []
  // resetForm()
  getList()  
}

const emit = defineEmits(['getPartNumber'])

// 确认
const submitForm = () => {
  if (multipleSelection.value.length > 1) {
    message.notifyError('只能选择一条数据')
    return
  }
  dialogVisible.value = false
  emit('getPartNumber', multipleSelection.value)
  multipleTableRef.value!.clearSelection()
}

// 获取列表
const getList = async () => {
  formLoading.value = true
  list.value = []
  const res = await MgmtDefectiveProductRegistrationApi.getPartInfoList(queryParams)
  list.value = res
  formLoading.value = false
}

// 搜索
const handleQuery = async () => {
  if(queryParams.productNumber!="" || queryParams.productName!="" || queryParams.partName!="" ){
    console.log('queryParams',queryParams)
    getList()
  }
}

// 重置按钮
const resetQuery = () => {
  resetForm()
  handleQuery()
}

// 多选赋值
const multipleSelection = ref([])
const multipleTableRef = ref()
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

defineExpose({ open, multipleSelection }) // 提供 open 方法，用于打开弹窗

// 重置表单
const resetForm = () => {
  queryParams.productNumber=''
  queryParams.productName=''
  queryParams.partName=''
  list.value = []
}
</script>
<style lang="scss" scoped>
.mb {
  margin-bottom: 20px;
}

.pagination::after {
  content: '';
  display: block;
  clear: both;
  height: 0;
}
</style>
